<script>
// import { h } from 'vue'
export default {
  name: 'XtxBread',
  render() {
    // 默认插槽 (过滤出type.name为 XtxBreadItem)
    const solts = this.$slots.default().filter(item => typeof item.type !== 'symbol')
    console.log(solts)
    const result = []
    solts.forEach((item, index) => {
      //  const tag = h('i', { class: 'iconfont icon-angle-right' })
      result.push(item)
      // 判断索引值不是最后一个
      if (index < solts.length - 1) {
        // 不是最后一个元素就增加＞号
        result.push(<i className="iconfont icon-angle-right"></i>)
      }
    })
    console.log(result)
    // return h('div', { class: 'xtx-bread' }, result)
    return <div className="xtx-bread">{result}</div>
  },
  props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: [String, Object],
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
.xtx-bread {
  display: flex;
  padding: 25px 10px;
  :deep(&-item) {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  :deep(i) {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
